<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2025/4/15
  Time: 下午4:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>个人信息修改</title>
    <!-- Bootstrap CSS -->
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .form-container {
            max-width: 600px;
            margin: 10px auto;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }

        .form-group {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="form-container">
        <h2 class="text-center mb-4">个人信息修改</h2>
        <% if (request.getAttribute("error") != null) { %>
        <div class="error-message" style="color: red">${error}</div>
        <% } %>

        <% if (request.getAttribute("message") != null) { %>
        <div class="success-message" style="color: red">${message}</div>
        <% } %>
        <form action="${pageContext.request.contextPath}/user/selfInfo" enctype="multipart/form-data" method="post">
            <div class="form-group">
                <label>修改头像信息：</label>
                <input type="file" name="file" id="uploadInput" onchange="uploadFile()"/>
                <img src="" id="showImage" width="50" height="50" alt="上传头像"/>
                <!-- 隐藏的输入框，用于存储图片路径 -->
                <input type="hidden"
                       name="imagePath"
                       id="imagePath"
                       value="${not empty user.avatar ? user.avatar : 'default-avatar.jpg'}"/>
                <%--                <input type="hidden" name="imagePath" id="imagePath" value="${user.avatar}"/>--%>
            </div>
            <div class="form-group">
                <label>当前头像：</label>
                <img src="${not empty user.avatar ? user.avatar : 'http://localhost:9000/e-commerce/28a2d36673f8436da8708980d316efa7.jpg'}"
                     width="50"
                     height="50"
                     alt="上传头像"/>
            </div>
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" class="form-control" id="username" name="username" value="${user.username}" required>
            </div>
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" class="form-control" id="email" name="email" value="${user.email}" required>
            </div>
            <%--            <div class="form-group">--%>
            <%--                <label for="phone">手机号码</label>--%>
            <%--                <input type="tel" class="form-control" id="phone" name="phone" value="${user.phone}" required>--%>
            <%--            </div>--%>
            <div class="form-group">
                <label>性别</label>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="gender" id="male"
                           value="1" ${user.gender == 1 ? 'checked' : ''}>
                    <label class="form-check-label" for="male">男</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="gender" id="female"
                           value="0" ${user.gender == 0 ? 'checked' : ''}>
                    <label class="form-check-label" for="female">女</label>
                </div>
            </div>
            <div class="text-center" style="margin-bottom: 10px">
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#changePhoneModal">
                    换绑电话号码
                </button>
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#changePassword">
                    修改密码
                </button>
                <button>
                    <a href="${pageContext.request.contextPath}/address/list" class="btn btn-primary">地址查询</a>
                </button>
                <%--                <button type="button" class="btn btn-primary">换绑邮箱</button>--%>
            </div>
            <div class="text-center">
                <button type="submit" class="btn btn-primary" name="action" value="delete"
                        style="background-color: red">注销该账号
                </button>
                <button type="submit" class="btn btn-primary" name="action" value="save">保存修改</button>
                <button type="button" class="btn btn-secondary ml-2" onclick="history.back()">返回</button>
            </div>
        </form>
    </div>
</div>
<%--换绑密码的弹窗--%>
<div class="modal fade" id="changePassword" tabindex="-1" aria-labelledby="changePasswordLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="changePasswordLabel">修改密码</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="${pageContext.request.contextPath}/user/changePassword" method="post">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="oldPassword" class="form-label">原始密码</label>
                        <input type="password" class="form-control" id="oldPassword" name="oldPassword" required>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">新密码</label>
                        <input type="password" class="form-control" name="password" placeholder="密码包含字母和数字，并且必须以大写字母开头的6-10位" id="password" required minlength="6">
                    </div>
                    <div class="mb-3">
                        <label for="confirmPassword" class="form-label">确认新密码</label>
                        <input type="password" class="form-control" name="confirmPassword" id="confirmPassword" required>
                    </div>
                    <div class="text-danger" id="passwordError" style="display: none;">
                        两次输入的密码不一致，请重新输入。
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">提交修改</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 换绑手机号弹窗 -->
<div class="modal fade" id="changePhoneModal" tabindex="-1" aria-labelledby="changePhoneModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="${pageContext.request.contextPath}/user/changePhone" method="post">
                <div class="modal-header">
                    <h5 class="modal-title" id="changePhoneModalLabel">换绑手机号</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="newPhone" class="form-label">新手机号</label>
                        <input type="tel" class="form-control" id="newPhone" name="newPhone"
                               placeholder="请输入新手机号" required>
                    </div>
                    <div class="mb-3 d-flex align-items-center">
                        <div class="flex-grow-1 me-2">
                            <label for="code" class="form-label">验证码</label>
                            <img id="captchaImg" src="${pageContext.request.contextPath}/user/captcha" alt="验证码"/>
                            <a href="#" onclick="refreshCaptcha(); return false;">换一张</a>
                            <input type="text" class="form-control" id="code" name="code" placeholder="请输入验证码"
                                   required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">确认换绑</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Bootstrap JS 和依赖 -->
<script src="<c:url value="/static/js/jquery-3.6.0.min.js"/>"></script>

<%--换绑电话号码弹窗--%>
<!-- jQuery -->
<script src="${pageContext.request.contextPath}/static/js/jquery-3.7.1.min.js"></script>

<!-- Bootstrap Bundle JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- 自定义 JS -->
<script type="text/javascript">
    $("#avatarInput").on("change", uploadFile);

    function uploadFile() {
        const avatarFile = $('#uploadInput')[0].files[0];
        if (!avatarFile) {
            alert("请选择一个文件上传！");
            return;
        }

        let formData = new FormData();
        formData.append("file", avatarFile);
        $.ajax({
            url: "/shop/user/upload",
            method: "post",
            data: formData,
            processData: false,
            contentType: false,
            success: (response) => {
                $("#showImage").attr("src", response);
                $("#imagePath").val(response);
            },
            error: (xhr, status, error) => {
                console.error("上传失败:", error);
                alert("上传失败，请重试！");
            }
        });
    }

    //换绑电话号码的弹窗信息

    function refreshCaptcha() {
        var captchaImg = document.getElementById('captchaImg');
        captchaImg.src = '${pageContext.request.contextPath}/user/captcha?' + new Date().getTime();
    }

    $(document).ready(function () {
        let countdown = 60;
        let timer;

        $("#sendCodeBtn").on("click", function () {
            const phone = $("#newPhone").val();
            if (!phone) {
                alert("请先输入手机号");
                return;
            }

            if (!timer) {
                $(this).prop("disabled", true);
                timer = setInterval(() => {
                    countdown--;
                    $("#sendCodeBtn").text(countdown + "s 后重发");
                    if (countdown <= 0) {
                        clearInterval(timer);
                        timer = null;
                        countdown = 60;
                        $("#sendCodeBtn").text("获取验证码").prop("disabled", false);
                    }
                }, 1000);
            }
        });
    });
</script>
</body>
</html>
